<h2 id="keyspaceName"> {{keyspace.Name}} </h2>

<table id="heatmapTable" class="collapsed-border">
  <!-- The first row with an offset to match the heatmap labels. -->
  <tr [ngStyle]="{'height': (getXLabelsRowHeight())+'px'}">
    <td class="no-padding"></td>
    <td class="no-padding"></td>
    <td class="no-padding" [attr.rowspan]="(getTotalRows()+1)">
      <div id="{{name}}" [ngStyle]="{'height': heatmapHeight+'px'}">
        <!-- Heatmap gets drawn in this div-->
      </div>
    </td>
  </tr>

<!-- The cell and type labels of the map are drawn -->
<template ngFor let-label [ngForOf]="yLabels" let-firstKeyspace="first">
  <template [ngIf]="label.TypeLabels == null">
  <tr [ngStyle]="{'height': getRowHeight()+'px'}">
    <td [attr.rowspan]="label.CellLabel.Rowspan" class="bordered">{{label.CellLabel.Name}}</td>
  </tr>

  <!-- We add empty rows here because the rowspan value of the heatmap's cell labels expects them. -->
  <tr *ngFor="let num of getRemainingRows(label.CellLabel.Rowspan)" [ngStyle]="{'height': getRowHeight()+'px'}"></tr>
  </template>

  <template [ngIf]="label.TypeLabels != null">
    <template ngFor let-typeLabel [ngForOf]="label.TypeLabels" let-firstCell="first">
    <tr [ngStyle]="{'height': getRowHeight()+'px'}">
      <td *ngIf="firstCell" [attr.rowspan]="label.CellLabel.Rowspan" class="bordered">{{label.CellLabel.Name}}</td>
      <td class="bordered" [attr.rowspan]="typeLabel.Rowspan">{{typeLabel.Name}}</td>
    </tr>

    <!-- We add empty rows here because the rowspan value of the heatmap's cell and type labels expects them. -->
    <tr *ngFor="let num of getRemainingRows(typeLabel.Rowspan)" [ngStyle]="{'height': getRowHeight()+'px'}"></tr>
    </template>
  </template>
</template>
</table>

<div *ngIf="showPopup" class="popup">
  <vt-tablet-popup [data]="popupData"
                   [alias]="popupAlias"
                   [keyspace]="popupKeyspace"
                   [shard]="popupShard"
                   [cell]="popupCell"
                   [tabletType]="popupType"
                   [clicked]="popupClickState"
                   >
  </vt-tablet-popup>
 <button md-button (click)="closePopup()" class="centered">Dismiss</button>
</div>
